<template>
    <div class="merchantsList">
      <div class="zhezao" v-if="loadingShow">
        <i class="el-icon-loading" />数据加载中...
      </div>
      <div class="top">
        <div class="time pad" style="display: flex; flex-direction: row;align-items: center;width: 370px;" >
            <span class="label" style="width:100px;">商户查询：</span>
            <el-input placeholder="商户编号\账号名称\店铺名称\手机号" v-model="filter.query" > </el-input>
         </div>
        <div class="time pad">
          <span class="label">行业类型：</span>
          <el-cascader :props="{ checkStrictly: true }" :options="typeLs" @change="handleChange" v-model="shopType">
          </el-cascader>
        </div>
        <div class="time pad">
          <span class="label">管辖区域：</span>
          <el-select v-model="filter.areaId" placeholder="请选择">
            <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="time pad">
          <span class="label">申请来源：</span>
          <el-select v-model="filter.source" placeholder="请选择">
            <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!-- <div class="time pad">
          <span class="label">审核状态：</span>
          <el-select v-model="filter.status" placeholder="请选择">
            <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div> -->
        <div class="btn pad">
          <el-button @click="setReset">重置</el-button>
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </div>
      <div class="main">
        <div class="main_top">
          <div class="lef">
            <div class="" v-for="(item,index) in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
              :value="item.id" @click="handleTab(item.id,index)">
              {{ item.value }} <span>({{ item.num }})</span>
            </div>
          </div>

          <div>
            <el-button type="primary" @click="addStoreApplication">新增注销店铺申请</el-button>
            <export-excel-button title="商家列表" action="/logout/v1/merchantLogoutList/export" :params="ExportParams" />
          </div>
        </div>
        <ex-table ref="table" 
          :table-column="tableColumn" :table-data="tableData" @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange">
          
          <template v-slot:source="{ scope }">
            <dict-tag :options="sourceList" :value="scope.row.source" /> 
          </template>
          <template v-slot:status="{ scope }">
            <dict-tag :options="statusList" :value="scope.row.status" /> 
          </template>
          <template v-slot:operate="{ scope }">
            <el-button @click="getAudit(scope.row)" size="small" v-if="scope.row.status == 1">审核</el-button>
            <el-button @click="lookDetail(scope.row)" size="small">查看</el-button>
          </template>
        </ex-table>
      </div>
      <AncelMerchant v-if="detailDialog" :id="id" :merchantName="merchantName" :merchantId='merchantId' :visible.sync="detailDialog" @success="_handleSuccess" />
      <StoreApplication v-if="storeAppDialog" :visible.sync="storeAppDialog" @success="_handleStoreSuccess" />
    </div>
  </template>
  <script>
    // api
    import { shopTypeTree } from "@/api/merchants";
    import { logoutV1MerchantLogoutNumber,logoutV1MerchantLogoutList } from "@/api/merchants/cancelAudit";

    import {
      referrer,
    } from "@/api/merchants/merchantsAudit";
    import {
      userAreaSelect,
    } from "@/api/common";
    // mixins
    import handlePageMixin from "@/mixins/handlePageMixin";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
    import AncelMerchant from "./components/cancelAudit/ancelMerchant";
    import StoreApplication from "./components/cancelAudit/storeApplication";
    
    export default {
      name: "NewIncreaseVerify",
      components: {
        ExportExcelButton,
        AncelMerchant,
        StoreApplication
      },
      mixins: [handlePageMixin],
      computed: {
        ExportParams() {
          const params = {
            ...this.pageOptions,
            ...this.filter,
          };
          return params;
        },
      },
      data() {
        return {
          loadingShow: false,
          value: [],
          shopType: "",
          loading: false,
          detailDialog: false,
          storeAppDialog: false,
          type: [
            { id: 0, value: "全部", num: "",status:''},
            { id: 1, value: "待审核", num: "",status:'1'},
            { id: 2, value: "已注销", num: "",status:'2'},
            { id: 3, value: "已取消", num: "",status:'3'},
          ],
          // referrerList: [],//邀请人列表
          tableColumn: [{
              prop: "govAreaName",
              label: "管辖区域",
              width: "130"
            },
            {
              prop: "merchantId",
              label: "商户编号",
              width: "120",
            },
            {
              prop: "merchantArea",
              label: "地区",
              width: "150"
            },
            {
              prop: "merchantName",
              label: "商户账号名称",
              width: "200"
            },
            {
              prop: "shopName",
              label: "店铺名称",
              width: "150"
            },
            {
              prop: "phone",
              label: "联系手机号",
              width: "150"
            },
            {
              prop: "shopTypeName",
              label: "行业类型",
              width: "150"
            },
            {
              prop: "createTime",
              label: "申请时间",
              width: "180"
            },
            {
              slot: true,
              slotName: "source",
              label: "申请来源",
              width: "120"
            },
            {
              slot: true,
              slotName: "status",
              label: "审核状态",
              width: "120"
            },
            {
              prop:'remark',
              label: "备注",
              width: "200",
            },
            {
              label: "操作",
              slot: true,
              slotName: "operate",
              width: "150",
              fixed: "right",
            },
          ],
          filter: {
            areaId: "", //区域
            query: "", //查询内容字符串
            shopTypeParent:'',//行业类型一级
            shopType: "",//行业类型二级
            source: "", //申请来源
            status: "", //审核状态
          },
          tableData: [],
          currentNavtab: 0,
          typeLs: [],
          id: "", //列表id
          merchantName:'',//商户账号名称
          merchantId:'',//商户账号id
          sourceList: [], //申请来源列表
          statusList: [], //申请状态
          areaSelect: [], //区域下拉
        };
      },
  
      created() {
        this.getDict()
        this.getReferrer();
        this.getTypels();
        this.getUserAreaSelect();
      },
      methods: {
        //获取邀请人下拉
        getReferrer(){
          var params = {}
          referrer(params).then(res => {
            this.referrerList = res.result
          })
        },
        getUserAreaSelect() {
          //查询用户区域下拉框
          userAreaSelect().then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.areaSelect = arr.concat(res.result);
          });
        },
        //获取字典
        async getDict() {
          var res = await this.$getSelectList("bee_merchant_logout_source")
          this.sourceList = this.sourceList.concat(res.result[0].dictList);
          var vo = await this.$getSelectList("bee_merchant_logout_status")
          this.statusList = this.statusList.concat(vo.result[0].dictList);
          this.getList();
          this.getNum();
        },
        getTypels() {
          this.loading = true;
          shopTypeTree()
            .then((res) => {
              let ls = [];
              // console.log("res.result+++", res.result);
              ls = this.getTreeData(res.result);
              // console.log(this.typeLs)
              let ls1 = ls.map((item) => {
                item.value = item.id;
                item.children.map((items) => {
                  items.value = items.id;
                });
                return item;
              });
              // console.log("ls1+++", ls1);
              this.typeLs = ls1;
            })
            .finally(() => {
              this.loading = false;
            });
        },
        // 新增注销店铺申请
        addStoreApplication(){
          this.storeAppDialog = true
        },
        getTreeData(data) {
          // 循环遍历json数据
          for (var i = 0; i < data.length; i++) {
            if (data[i].children.length < 1) {
              // children若为空数组，则将children设为undefined
              // data[i].children=undefined;
              delete data[i].children;
            } else {
              // children若不为空数组，则继续 递归调用 本方法
              this.getTreeData(data[i].children);
            }
          }
          return data;
        },
        //行业选择
        handleChange(value) { 
          let _this = this;
          console.log(value);
          if (value.length == 2) {
            _this.filter.shopType = value[1];
            _this.filter.shopTypeParent = value[0];
          } else {
            _this.filter.shopTypeParent = value[0];
            _this.filter.shopType = '';
          }
        },

        //审核
        getAudit(item) {
            this.merchantName = item.merchantName
            this.merchantId = item.merchantId
            this.id = item.id;
            this.detailDialog = true;
        },
      //查看详情
      lookDetail(e) {
        let id = e.merchantId;
        if (id == "-") {
          id = "";
        }
        var query ={id: id,type: 1, shopManageId: e.shopManageId }
        if(e.status == 2){
          query.cancelAudit = 1 
        }
        //跳转已入驻商家
        this.$router.push({
          path: "/merchants/merchants-detail",
          query: query
        });
      },
        //切换选项
        handleTab(id,index) {
          console.log("id", id), (this.currentNavtab = id);
          this.filter.status = this.type[index].status
          this.pageOptions.pageNum = 1;
          this.$refs.table.pageOptions.pageNum = 1;
          this.getList();
        },
        //列表
        getList() {
          this.loading = true;
          this.loadingShow = true
          const params = {
            ...this.pageOptions,
            ...this.filter,
          };
          logoutV1MerchantLogoutList(params)
            .then((res) => {
              const {
                total,
                records
              } = res.result;
              records.forEach((item) => {
                if (item.cityName != "") {
                  item.region = item.provinceName + "-" + item.cityName + "-" + item.areaName; //处理地区
                } else {
                  item.region = "-";
                }
                //处理注册状态
                // if (item.type == 1) {
                //   item.typeDict = "正常";
                // } else if (item.type == 2) {
                //   item.typeDict = "待使用";
                // } else {
                //   item.typeDict = "-";
                // }
                //判断是否为空，为空展示-
                for (var key in item) {
                  if (!item[key]) {
                    item[key] = "-";
                  }
                }

              });
              this.$refs.table.pageOptions.total = total;
              this.tableData = records;
            })
            .finally(() => {
              this.loading = false;
              this.loadingShow = false
            });
        },
        //查询审核条数
        getNum() {
          this.loading = true;
          var params = {
            ...this.filter
          }
          delete params.status
          logoutV1MerchantLogoutNumber(params)
            .then((res) => {
              this.type[0].num = res.result.total
              this.type[1].num = res.result.audit;
              this.type[2].num = res.result.logout;
              this.type[3].num = res.result.cancel;
            })
            .finally(() => {
              this.loading = false;
            });
        },
        _handleSuccess() {
          this.getList();
          this.getNum();
          this.detailDialog = false;
        },
        // 新增注销店铺申请成功
        _handleStoreSuccess(){
          this.getList();
          this.getNum();
          this.storeAppDialog = false;
        },
        //重置
        setReset() {
          this.filter.query = "";
          this.filter.shopType = ''
          this.filter.shopTypeParent = ''
          this.filter.areaId = '';
          this.filter.referrer = '' 
          this.filter.source = '' 
          this.filter.status = '';
          this.shopType = "";
          this.currentNavtab = 0
          this.pageOptions.pageNum = 1;
          this.$refs.table.pageOptions.pageNum = 1;
          this.getList();
          this.getNum()
        },
        //搜索
        search() {
          this.pageOptions.pageNum = 1;
          this.$refs.table.pageOptions.pageNum = 1;
          this.getList();
          this.getNum()
        },


        //
      },
    };
  
  </script>
  <style lang="scss" scoped>
    @import "./style/merchantsList";
  
    .zhezao{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      color: #1890ff;;
    }
  </style>
  